<template>
    <div id="aboutme">
        <el-tabs v-model="status" @tab-click="getData">
            <el-tab-pane label="我赞过的" name="0">
            </el-tab-pane>
            <el-tab-pane label="我收藏的" name="1">
            </el-tab-pane>
            <el-tab-pane label="我看过的" name="2">
            </el-tab-pane>
        </el-tabs>
        <el-table
                :data="tableData"
                style="width: 100%">
            <el-table-column
                    type="index"
                    width="50">
            </el-table-column>
            <el-table-column
                    prop="title"
                    label="标题"
                    width="300">
                <template slot-scope="scope">
                    <span>
                        {{scope.row.video.title}}
                    </span>
                </template>
            </el-table-column>
            <el-table-column
                    prop="introduction"
                    label="简介"
                    width="400">
                <template slot-scope="scope">
                    <el-tooltip content="Bottom center" placement="bottom" effect="light">
                        <span>
                        {{scope.row.video.introduction}}
                    </span>
                    </el-tooltip>
                </template>
            </el-table-column>
            <el-table-column
                    label="操作">
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row.videoId)" type="text" size="small">查看</el-button>
                    <el-button @click="deleteVideo(scope.row.id)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <Pagination v-bind:child-msg="pageparm" @callFather="pageCallFather"></Pagination>
    </div>
</template>

<script>
    import Pagination from "@/components/Pagination";
    import {selectViewsByUser, deleteViewsById} from "@/api/videoViewsFun";
    import {selectLikeByUser, deleteLikeById} from "@/api/videoLikeFun";
    import {selectCollectByUser, deleteCollectById} from "@/api/videoCollectFun";
    import {getStore} from "@/utils/util";
    import {Loading, Message, MessageBox} from 'element-ui';

    export default {
        name: "manage",
        data(){
            return{
                tableData: [

                ],
                activeName: 'second',
                status: '0',
                pageQuery: {
                    userId: '',
                    pageIndex: 0,
                    pageSize: 10
                },
                pageparm: {
                    currentPage: 1,
                    pageSize: 10,
                    total: 0
                }
            }
        },
        // 注册组件
        components: {
            //分页组件
            Pagination
        },
        created(){
            let userInfo = getStore("userInfo");
            if (userInfo) {
                this.pageQuery.userId = userInfo.id
            }
          this.getData();
        },
        methods: {
            getData() {
                this.pageQuery.pageIndex = 0;
                this.pageQuery.pageSize = 10;
                this.pageparm.currentPage = 1;
                this.pageparm.pageSize = 10;
                this.pageparm.total = 0;
                if (this.status == '0') {
                    selectLikeByUser(this.pageQuery).then(res=>{
                        if (res.status == 200) {
                            this.tableData = res.data.data
                            this.pageparm.total = res.data.data.totalCount
                        }else {
                            Message.error(res.message);
                        }
                    })
                }else if (this.status == '1') {
                    selectCollectByUser(this.pageQuery).then(res=>{
                        if (res.status == 200) {
                            this.tableData = res.data.data
                            this.pageparm.total = res.data.data.totalCount
                        }else {
                            Message.error(res.message);
                        }
                    })
                }else {
                    selectViewsByUser(this.pageQuery).then(res=>{
                        if (res.status == 200) {
                            this.tableData = res.data.data
                            this.pageparm.total = res.data.data.totalCount
                        }else {
                            Message.error(res.message);
                        }
                    })
                }

            },
            handleClick(id) {
                this.$router.push({
                    path: '/videos/videoDetail',
                    query: {
                        videoId: id
                    }
                })
            },
            deleteVideo(id) {
                this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    if (this.status == '0') {
                        deleteLikeById({
                            id: id
                        }).then(res=>{
                            if (res.status == 200) {
                                Message.success(res.message);
                                this.getData();
                            }else{
                                Message.error(res.message);
                            }
                        })
                    }else if (this.status == '1') {
                        deleteCollectById({
                            id: id
                        }).then(res=>{
                            if (res.status == 200) {
                                Message.success(res.message);
                                this.getData();
                            }else{
                                Message.error(res.message);
                            }
                        })
                    }else {
                        deleteViewsById({
                            id: id
                        }).then(res=>{
                            if (res.status == 200) {
                                Message.success(res.message);
                                this.getData();
                            }else{
                                Message.error(res.message);
                            }
                        })
                    }

                });
            },
            // 分页插件事件
            pageCallFather(param) {
                this.pageQuery.pageIndex = param.currentPage - 1;
                this.pageQuery.pageSize = param.pageSize;
                this.getData();
            },
        }
    }
</script>

<style>
    #aboutme{
        padding: 20px 20px 80px;
    }

    #aboutme .el-tabs__item{
        color: white;
    }
    #aboutme .el-tabs__item.is-active {
        color: #f3cd20;
    }
    #aboutme .el-tabs__active-bar {
        background-color: #f3cd20;
    }

    #aboutme .el-table th, .el-table .el-table__row {
        color: white;
        background: rgb(48, 49, 51);
    }
    #aboutme .el-table th, .el-table .el-table__row:hover {
        color: #67C23A;
    }
    #aboutme .el-table, .el-table__expanded-cell{
        background-color: #272727;
    }
</style>
